<template>
  <el-menu @open="handleOpen" @close="handleClose" background-color="#0f4894" text-color="#fff" active-text-color="#fff">
    <template v-for="item in menuList" :key="item.id">
      <moreMenu v-if="item.children.constructor === Array && item.children.length > 0" :menuNav="item" />
      <el-menu-item v-else :index="item.id" @click="goToPath(item)">
        {{ item.title }}
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import moreMenu from './part/moreMenu.vue'
import { getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import menuList from '../../menuConfig'
export default {
  components: { moreMenu },

  setup() {
    const store = useStore()
    const router = useRouter()
    // const { proxy } = getCurrentInstance() // 使用proxy代替ctx，因为ctx只在开发环境有效
    // const { ctx } = getCurrentInstance()
    function handleOpen(key, keyPath) {
      console.log(key, keyPath)
    }
    function handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
    function goToPath(route) {
      store.commit('setMenu', route)
      // router.push(route.url)
    }
    return {
      handleOpen,
      handleClose,
      goToPath,
      menuList,
    }
  },
}
</script>

<style scoped></style>
